<template>
	<view class="container">
		<uni-nav-bar
			class="navbar"
			left-icon="left"
			backgroundColor="#F8F8F8"
			:leftWidth="commonWidth"
			:rightWidth="commonWidth"
			@clickLeft="leftBack">
			<view class="nav-title">{{ navTitle }}</view>
			<template v-slot:right>
				<slot name="right"></slot>
			</template>
		</uni-nav-bar>
		<view class="scroll">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	defineProps({
		navTitle: {
			type: String,
			default: _ => ''
		},	//	导航标题
		commonWidth: {
			type: String,
			default: _ => '140rpx'
		}	//	左右宽
	})
	//	返回上一页
	const leftBack = _ => uni.navigateBack();
</script>

<style scoped lang="scss">
	.container {
		height: 100%;
		.navbar {
			background-color: #f8f8f8;
			padding-top: var(--status-bar-height);
			.nav-title {
				flex: 1;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 32rpx;
				color: #333333;
				line-height: 48rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			::v-deep {
				.uni-icons {
					margin-left: -4rpx;
					font-size: 50rpx !important;
					color: #000 !important;
				}
			}
		}
		.scroll {
			height: calc(100vh - 45px - var(--status-bar-height));
			overflow-y: auto;
		}
	}
</style>
